<template>
  <scroll-container class="mpd-side-panel-structure">
    <a-tree
      :show-line="true"
      :show-icon="false"
      :defaultExpandAll="true"
      :treeData="treeData"
      :draggable="true"
      :replaceFields="{ key: 'id' }"
      :selectedKeys="[selectPageNodeDom.item.id]"
      @select="treeNodeSelectHandle"
      @drop="onDrop"
    >
      <template #switcherIcon>
        <a-icon type="down" />
      </template>
      <template #title="item">
        <span>{{ item.title }}</span>
        <span class="text-color-gray text-size-sm">({{ item.mpdConfig.component }})</span>
      </template>
    </a-tree>
  </scroll-container>
</template>

<script>
import { loopGetOneItem } from '@/util/utils'
import { isCanPushChildren, selectItem } from '@/util/pageUtil'

export default {
  name: 'PanelStructure',
  inject: ['mpdPageConfig', 'selectPageNodeDom'],
  computed: {
    // 树数据
    treeData() {
      return [this.mpdPageConfig]
    }
  },
  methods: {
    // 选中树节点
    treeNodeSelectHandle(selectedKeys, e) {
      let item
      if (selectedKeys.length > 0) {
        item = loopGetOneItem([this.mpdPageConfig], 'id', selectedKeys[0])
      }
      selectItem(this.selectPageNodeDom, item)
    },
    // 拖拽处理
    onDrop(info) {
      const dropKey = info.node.eventKey
      const dragKey = info.dragNode.eventKey
      const dropPos = info.node.pos.split('-')
      const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1])
      if (dropKey === this.mpdPageConfig.id && dropPosition === -1) {
        proxy.$mpdMessage.error('不能拖拽到根节点')
        return
      }
      const loop = (data, key, callback) => {
        data.forEach((item, index, arr) => {
          if (item.id === key) {
            return callback(item, index, arr)
          }
          if (item.children) {
            return loop(item.children, key, callback)
          }
        })
      }
      const data = [this.mpdPageConfig] // Find dragObject
      let dragObj = {}
      let dragArr = []
      let dragIndex = -1
      loop(data, dragKey, (item, index, arr) => {
        dragArr = arr
        dragIndex = index
        dragObj = item
      })
      let errorFlag = false
      if (!info.dropToGap) {
        // Drop on the content
        loop(data, dropKey, item => {
          item.children = item.children || [] // where to insert 示例添加到尾部，可以是随意位置
          if (isCanPushChildren(item, dragObj)) {
            item.children.push(dragObj)
            dragArr.splice(dragIndex, 1)
          } else {
            errorFlag = true
          }
        })
      } else if (
        (info.node.children || []).length > 0 && // Has children
        info.node.expanded && // Is expanded
        dropPosition === 1 // On the bottom gap
      ) {
        loop(data, dropKey, item => {
          item.children = item.children || [] // where to insert 示例添加到尾部，可以是随意位置
          if (isCanPushChildren(item, dragObj)) {
            item.children.unshift(dragObj)
            dragArr.splice(dragIndex, 1)
          } else {
            errorFlag = true
          }
        })
      } else {
        dragArr.splice(dragIndex, 1)
        let ar = []
        let i = 0
        loop(data, dropKey, (item, index, arr) => {
          ar = arr
          i = index
        })
        if (dropPosition === -1) {
          ar.splice(i, 0, dragObj)
        } else {
          ar.splice(i + 1, 0, dragObj)
        }
      }
      if (!errorFlag) {
        this.mpdPageConfig.children = data[0].children
      }
      selectItem(this.selectPageNodeDom, dragObj)
    }
  }
}
</script>
